import { ReqCityOrDistrictOrHostypeResponse, ReqHospitalList, ReqProvinceListResponse } from '@/api/hospitalList/hospitalList';
import { hospitalItemType, hospitalListType, provinceOrCityOrDistrictOrHostypeList } from '@/api/hospitalList/model/hospitalListTypes';
import { Button, Card, Form, Input, Select, Table, Tag } from 'antd'
import { useForm } from 'antd/lib/form/Form';
import type { ColumnsType } from 'antd/lib/table';
import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom';
const { Option } = Select

export default function HospiatlList() {

  //总数
  let [total, setTotal] = useState<number>(20);
  // 每页展示数量状态
  let [pageSize, setPageSize] = useState<number>(5);
  //当前页码状态
  let [current, setCurrent] = useState<number>(1);
  //医院列表状态
  let [hospital, setHospital] = useState<hospitalListType>([]);
  //声明 loading 状态
  let [loading, setLoading] = useState<boolean>(false);
  //声明 省份状态
  let [province, setProvince] = useState<provinceOrCityOrDistrictOrHostypeList>([]);
  //声明 市状态
  let [city, setCity] = useState<provinceOrCityOrDistrictOrHostypeList>([]);
  //声明 区状态
  let [district, setDistrict] = useState<provinceOrCityOrDistrictOrHostypeList>([]);
  // 获取form
  let [form] = useForm()
  //导入 navigate 函数
  let navigate = useNavigate();
  // 医院类型
  let [hostype,setHosType] = useState<provinceOrCityOrDistrictOrHostypeList>([])

  // 设置表头信息
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      align: 'center',
      render(text, row, index) {
        return index + 1
      }
    },
    {
      title: "医院logo",
      align: "center",
      dataIndex: "logoData",
      render(text) {
        return <img style={{ width: 100 }} src={`data:image/jpeg;base64,${text}`} alt="" />
      }
    },
    {
      title: "医院名称",
      align: "center",
      dataIndex: "hosname",
    },
    {
      title: "等级",
      align: "center",
      dataIndex: "param",
      render(text) {
        return text.hostypeString
      }
    },
    {
      title: "详细地址",
      align: "center",
      render(row: hospitalItemType) {
        return row.param.fullAddress
      }

    },
    {
      title: "状态",
      width: 100,
      align: "center",
      dataIndex: "status",
      render(text) {
        return text === 1 ? <Tag color="#108ee9">已上线</Tag> : <Tag color="#f50">未上线</Tag>;
      }
    },
    {
      title: "创建时间",
      align: "center",
      dataIndex: "createTime",
    },
    {
      title: "操作",
      width: 260,
      align: "center",
      fixed: "right",
      render(row:hospitalItemType) {
        return <>
            <Button type="primary" onClick={()=>{
              navigate(`/syt/hospital/hospitalList/show/${row.id}`);
          }}>查看</Button>
          <Button type="primary" className='ml' onClick={()=>{
            navigate(`/syt/hospital/hospitalList/schedule/${row.hoscode}`)
          }}>排班</Button>
          <Button type="primary" className='ml'>上线</Button>
        </>
      }
    }
  ];

  // 获取医院列表数据
  let getHospitalList = async (page = current, limit = pageSize) => {
    // 获取表单信息
    let value = form.getFieldsValue()
    console.log(value); 
    //更新 每页展示数量状态
    setPageSize(limit);
    //更新页码状态
    setCurrent(page);
    //开启 loading
    setLoading(true);

    //调用 获取医院信息的方法
    let result = await ReqHospitalList({ page, limit, ...value})
    setLoading(false)
    setHospital(result.content)
    setTotal(result.totalElements)
  }
 
  // 获取省份数据
  let getProvinceList = async () => {
    let result = await ReqProvinceListResponse();
    //更新省份数据
    setProvince(result);
  }

  // 获取市数据
  let getCity = async (value: number) => {
    //清空 市 和区 表单数据
    form.setFieldsValue({cityCode:undefined,districtCode:undefined})
    setDistrict([])

    let result = await ReqCityOrDistrictOrHostypeResponse(value)   
    setCity(result)
  }

  //获取区数据
  let getDistrict = async (value: number) => {
    form.setFieldsValue({districtCode:undefined})
    let result = await ReqCityOrDistrictOrHostypeResponse(value)
    setDistrict(result)
  }

  // 获取医院类型
  let hospitalType = async()=>{
    let result = await ReqCityOrDistrictOrHostypeResponse(10000)
    setHosType(result)
  }

  // 单独模拟 componentDidMount  
  useEffect(() => {
    // 获取医院列表的数据
    getProvinceList()
    // 获取省份数据
    getHospitalList()
    // 获取医院类型
    hospitalType()
  }, [])


  return (
    <Card>
      {/* 搜索表单部分 */}
      <Form 
        layout='inline' 
        form = {form}
        onFinish={()=>{getHospitalList()}}
      >
        {/* 省 */}
        <Form.Item name="provinceCode">
          <Select onChange={getCity} style={{ width: 180 }} placeholder="请选择省份">
            {
              province.map(item => {
                return <Option key={item.id} value={item.id}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>

        {/* 市 */}
        <Form.Item name="cityCode">
          <Select onChange={getDistrict} style={{ width: 180 }} placeholder="请选择市">
            {
              city.map(item => {
                return <Option key={item.id} value={item.id}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>

        {/* 区 */}
        <Form.Item name="districtCode">
          <Select style={{ width: 180 }} placeholder="请选择区">
            {
              district.map(item => {
                return <Option key={item.id} value={item.id}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>

        {/* 医院类型 */}
        <Form.Item name="hostype">
          <Select style={{ width: 180 }} placeholder="医院类型" >
          {
            hostype.map(item =>{
              return <Option key={item.id} value={item.value}>{item.name}</Option>
            })
          }
          </Select>
        </Form.Item>

        {/* 医院状态 */}
        <Form.Item name="status">
          <Select style={{ width: 180 }} placeholder="医院状态">
            <Option value={1}>已上线</Option>
            <Option value={0}>未上线</Option>
          </Select>
        </Form.Item>

        <Form.Item name="hosname">
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item name="hoscode" className='mt'>
          <Input placeholder='医院编号' />
        </Form.Item>

        <Button type="primary" htmlType="submit" className='mt'>
          搜索
        </Button>
        <Button htmlType="reset" className='mt rt'>
          清空
        </Button>
      </Form>

      {/* 表格 */}
      <Table
        className='mt'
        columns={columns}
        bordered
        dataSource={hospital}
        scroll={{ x: 1200 }}

        pagination={{
          total,  //总数
          pageSize,  //每页展示数量
          current,  // 当前页码
          showQuickJumper: true,   //快速跳转值某页
          pageSizeOptions: [5, 10, 15, 20],
          showSizeChanger: true,
          onChange: getHospitalList,
          showTotal(total: number) {
            return <span>总计：{total} 条</span>
          }
        }}
      >
      </Table>
    </Card>
  )
}
